<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<cu-custom :title="$t('Page.user.wdqb')" class="nav-bg" :goBack="goBack">
				<block slot="rightText">
					<image :src="`/static/image/Mine/Mywallet/detail-black.png`" style="width:20px;" mode="widthFix"
						@click="toRecordPage"></image>
				</block>
			</cu-custom>
		</match-media>
		<view class="content">
			<pc-nav-bar :pageName="$t('Page.user.wdqb')">
				<block slot="right">
					<view class="pc-nav-right" @click="toRecordPage">
						<image :src="`/static/image/Mine/Mywallet/detail-${theme}.png`"
							style="width:28rpx;margin-right: 5px;" mode="widthFix"></image>
						<view>{{$t('Page.user.xq')}}></view>
					</view>
				</block>
			</pc-nav-bar>
			<view class="myWallet">
				<view class="walletDetail">
					<view class="zhye">{{$t('Page.user.zhye')}}</view>
					<view class="money">R$ {{ userMoney }}</view>
					<view class="entry cursor" @click="toWalletRecord">
						{{curTabIndex ? $t('Page.user.czjl'):$t('Page.user.txjl')}}>
					</view>
				</view>
				<image class="wallet-image" :src="`/static/image/Mine/Mywallet/bet-${theme}.png`"></image>
			</view>
			<view class="tabsBox">
				<view :class="['tab_item',{'tab_active': curTabIndex == index} ]" v-for="(item, index) in tabList"
					@click="changeTab(item, index)" :key="'tab' + index">
					{{ item.name }}
				</view>
			</view>
			<view class="wallet-cmp">
				<component :ref="currentComponent" :is="currentComponent" :key="componentKey"></component>
			</view>
		</view>
	</view>
</template>

<script>
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	import cuCustom from '@/components/cu-custom/cuCustom.vue'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import Deposit from './components/deposit.vue'
	import Widthdraw from './components/withdraw.vue'
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			Deposit,
			Widthdraw,
			pcNavBar,
			cuCustom
		},
		data() {
			return {
				MAX_SIZEiZE,
				tabList: [{
					name: this.$t('Page.user.ck')
				}, {
					name: this.$t('Page.user.tq')
				}],
				curTabIndex: 0,
				currentComponent: 'Deposit',
				componentKey: 0,
				isPC: false,
				isFromHome: false
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				userMoney: state => state.app.userMoney,
				userInfo: state => state.app.userInfo
			}),
		},
		onLoad(option) {
			if (option.index) {
				const cmpObj = {
					0: 'Deposit',
					1: 'Widthdraw'
				}
				this.curTabIndex = +option.index;
				this.currentComponent = cmpObj[this.curTabIndex]
			}
			if (option?.isFromHome) {
				this.isFromHome = option?.isFromHome
			}
			console.log("this.userInfo: ", this.userInfo);
		},
		onShow() {
			try {
				this.$refs[this.currentComponent] && this.$refs[this.currentComponent].onComponentShow()
			} catch (e) {}
		},
		methods: {
			...mapMutations('app', ['saveActiveTab']),
			goBack() {
				if (this.isFromHome) {
					const pagePath = '/pages/tabBar/home/index'
					uni.switchTab({
						url: pagePath
					})
					this.saveActiveTab(0)
					uni.setStorageSync('curMenuPagePath', pagePath);
				} else {
					const pagePath = '/pages/tabBar/mine/index'
					uni.switchTab({
						url: pagePath
					})
					this.saveActiveTab(3)
					uni.setStorageSync('curMenuPagePath', pagePath);
				}

			},
			toRecordPage() {
				uni.navigateTo({
					url: '/pages/Mine/wallet/components/allRecord'
				})
			},
			toWalletRecord() {
				const pages = {
					0: '/pages/Mine/wallet/components/rechargeRecord',
					1: '/pages/Mine/wallet/components/widthdrawRecord'
				}
				uni.navigateTo({
					url: pages[this.curTabIndex]
				})
			},
			changeTab(item, index) {
				if (this.curTabIndex === index) return;
				// 切换子组件 
				const cmpObj = {
					0: 'Deposit',
					1: 'Widthdraw'
				}
				const isBindBank = this.userInfo.bank instanceof Object

				// 提现页面，未绑定银行卡，跳转到绑定银行卡的页面
				if (+index === 1 && !isBindBank) {
					uni.showToast({
						title: this.$t('Page.mine.qxbdyhk'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/Mine/bindBank`
						})
					}, 2000)
					return
				}
				this.curTabIndex = index;
				this.currentComponent = cmpObj[index]
				// 更新 key 值，强制重新渲染子组件
				this.componentKey++
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: 100vh;
		background: var(--bg-3);

		.content {
			width: 100%;
			height: calc(100vh - 44px - var(--status-bar-height)) !important;
			overflow-y: auto;
			padding: 10px 15px 15px;
			box-sizing: border-box;

			.pc-nav-right {
				cursor: pointer;
				display: flex;
				color: #fff;
				padding: 7px 10px;
				align-items: center;
				background: var(--bg-25);
				border-radius: 100px;
			}

			.myWallet {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: var(--bg-26);
				border-radius: 20px;
				height: 150px;
				padding: 20px 5px 20px 20px;
				box-sizing: border-box;

				.walletDetail {
					display: flex;
					flex-direction: column;

					.zhye {
						font-size: 14px;
						font-weight: bold;
						color: var(--color-7);
						font-weight: bold;
					}

					.money {
						line-height: 47px;
						font-size: 25px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: var(--color-7);
					}

					.entry {
						margin-top: 12px;
						text-align: center;
						background: var(--bg-39);
						border-radius: 30px;
						color: #FFFFFF;
						padding: 7px 15px;
						white-space: nowrap;
					}
				}

				.wallet-image {
					width: 116px;
					height: 98px;
				}
			}

			.tabsBox {
				margin-top: 15px;
				display: flex;
				align-items: center;

				.tab_item {
					color: var(--color-8);
					font-size: 14px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					background: var(--bg-11);
					height: 33px;
					line-height: 33px;
					border-radius: 100px;
					padding: 0 23px;
					margin-right: 10px;
					box-sizing: border-box;
					cursor: pointer;

					&:last-child {
						margin-right: 0;
					}
				}

				.tab_active {
					background: var(--bg-13);
					box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
					color: var(--color-28);
				}
			}

			.wallet-cmp {
				width: 100%;
				margin-top: 15px;
			}
		}
	}

	@media screen and (min-width:768px) {
		.page-wrap {
			padding-top: 70px;

			.content {
				width: 100%;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				padding: 10px 30px 30px;
				box-sizing: border-box;

				.myWallet {
					margin: 30px 0;
					max-width: 600px;
					height: 220px;
					padding: 36px 30px 34px 60px;
					box-sizing: border-box;

					.walletDetail {

						.zhye {
							font-size: 20px;
							line-height: 23px;
						}

						.money {
							font-size: 40px;
							margin-top: 12px;
						}

						.entry {
							border-radius: 100px;
							padding: 7px 32px;
							white-space: nowrap;
						}
					}

					.wallet-image {
						width: 200px;
						height: 169px;
					}
				}

				.wallet-cmp {
					width: 100%;
					margin-top: 30px;
				}
			}
		}
	}
</style>